<template>
	<div class="todo-footer">
		<label>
			<input type="checkbox" v-model="checked" />
		</label>
		<span>
			<span>已完成 {{ isDoneNum }}</span> / 全部 {{ totalNum }}
		</span>
		<button class="btn btn-danger" v-show="isDoneNum > 0" @click="del">
			清除已完成任务
		</button>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
	name: "TodoFooter",
	computed: {
		...mapGetters("todoList", ["totalNum", "isDoneNum"]),
		checked: {
			get() {
				return this.totalNum === this.isDoneNum && this.totalNum > 0;
			},
			set(val) {
				this.UPDATE_TODOS(val);
			},
		},
	},
	methods: {
		...mapMutations("todoList", ["UPDATE_TODOS", "PATCH_DEL_TODOS"]),
		del() {
			this.PATCH_DEL_TODOS();
		},
	},
};
</script>

<style>
/*footer*/
.todo-footer {
	height: 40px;
	line-height: 40px;
	padding-left: 6px;
	margin-top: 5px;
}

.todo-footer label {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
}

.todo-footer label input {
	position: relative;
	top: -1px;
	vertical-align: middle;
	margin-right: 5px;
}

.todo-footer button {
	float: right;
	margin-top: 5px;
}
</style>
